<template>
    <div>
        <div class="headerData">
            <div class="headerMain">
                <el-divider><i class="headerIcon el-icon-share"><span>亚盟微服务CMS系统数据</span></i></el-divider>
            </div>
            <el-row :gutter="24">
                <el-col class="headerColumn" :span="6">
                    <el-progress class="headerDashBoard" type="dashboard" :percentage="percentage" :color="colors"></el-progress>
                    <el-button class="headerTitle" round>会员注册新增</el-button>
                </el-col>
                <el-col class="headerColumn" :span="6">
                    <el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
                    <el-button class="headerTitle" round>公司员工新增</el-button>
                </el-col>
                <el-col class="headerColumn" :span="6">
                    <el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
                    <el-button class="headerTitle" round>模块文章新增</el-button>
                </el-col>
                <el-col class="headerColumn" :span="6">
                    <el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
                    <el-button class="headerTitle" round>模块产品新增</el-button>
                </el-col>
            </el-row>

        </div>

        <div class="dataContent">
            <div class="content1">
                <el-divider content-position="left"><i class="contentIcon glyphicon glyphicon-signal"><span>站点数据展示</span></i></el-divider>
            </div>
            <el-row :gutter="20">
                <el-col :span="24">
                    <div id="echartsDemo" class="echarts"></div>
                    <div id="echartsDemo1" class="echarts"></div>
                    <div id="echartsDemo2" class="echarts"></div>
                </el-col>

            </el-row>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SiteData",
        data() {
            return {
                message: "您好，进入站点数据欢迎页面",
                //缓存数据
                employees: [],
                members: [],
                //头部数据
                percentage: 0,
                colors: [
                    {color: '#f56c6c', percentage: 20},
                    {color: '#e6a23c', percentage: 40},
                    {color: '#5cb87a', percentage: 60},
                    {color: '#1989fa', percentage: 80},
                    {color: '#409eff', percentage: 100}
                ]
            };

        },
        mounted() {
            this.allMembers();
            this.allEmployees();
            setInterval(() => {
                this.percentage = 80;
            }, 1000);
            //echarts引用
            this.drawEcharts();
            this.drawEchartsDemo1();
        },
        methods: {
            //查询全部员工
            allEmployees() {
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/admin/employee/list')
                    .then((response) => {
                        let resp = response.data;
                        if(resp.success){
                            this.employees = resp.responseData;
                            SessionStorage.set(EMP_ALL, this.employees);
                            this.allMembers();
                        }

                    })
            },
            //查询全部会员
            allMembers() {
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/admin/member/dtoList')
                    .then((response) => {
                        let resp = response.data;
                        if(resp.success){
                            this.members = resp.responseData;
                            SessionStorage.set(MEMBER_ALL, this.members);
                        }

                    })
            },
            drawEcharts(){
                let echartsDemo=document.getElementById("echartsDemo");
                echartsDemo.style.height="300px";
                echartsDemo.style.width="100%";
                let echarts=this.$echarts.init(echartsDemo);
                let option={
                    title: {
                        //text: 'ECharts 入门示例'
                    },
                    tooltip: {},
                    legend: {
                        data:['入驻数量']
                    },
                    xAxis: {
                        data: ["VIP会员","金卡1","金卡3","加盟店","提货站","物流中心"]
                    },
                    yAxis: {},
                    series: [{
                        name: '入驻数量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20],
                        itemStyle: {
                            normal: {
                                //这里是重点
                                color: function(params) {
                                    //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                    let colorList = ['#2a92ee','#2a92ee','#2a92ee','#2a92ee','#2a92ee','#2a92ee'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }],
                    color: ['#c23531','#2a92ee', '#2a92ee'],//设置颜色

                }
                echarts.setOption(option);
            },
            drawEchartsDemo1(){
                let demo1=document.getElementById("echartsDemo1");
                demo1.style.height="500px";
                let drawDemo=this.$echarts.init(demo1);
                let option={
                    title:{
                        text:'市场部销售图',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // Use axis to trigger tooltip
                            type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
                        }
                    },
                    legend: {
                        data: ['VIP会员', '金卡2', '金卡3', '提货站', '物流中心']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: ['市场1部销售额', '市场2部销售额', '市场3部销售额', '市场4部销售额', '市场5部销售额', '市场6部销售额', '市场7部销售额']
                    },
                    series: [
                        {
                            name: 'Direct',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [320, 302, 301, 334, 390, 330, 320]
                        },
                        {
                            name: 'Mail Ad',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: 'Affiliate Ad',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: 'Video Ad',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [150, 212, 201, 154, 190, 330, 410]
                        },
                        {
                            name: 'Search Engine',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [820, 832, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                };
                drawDemo.setOption(option);
            },
        }
    }
</script>

<style scoped>
    .headerData{
        margin-top: 20px;
    }
    .headerData .headerMain{
        text-align: center;
        margin-bottom: 30px;
    }
    .headerData .headerMain .headerIcon{
        background: #2a92ee;
        padding: 10px 30px;
        color: #ffffff;
    }
    .headerData .headerMain span{
        background: #2a92ee;
        padding: 10px 10px;
        color: #ffffff;
        font-weight: 700;
    }
    .headerData .headerColumn{
        position: relative;
    }

    .headerData .headerColumn .headerTitle {
        position: absolute;
        width: 70%;
        text-align: center;
        bottom: -30px;
        left: 15%;
    }
    .dataContent .content1{
        margin-top: 70px;
    }
    .dataContent .content1 i{
        display: inline-block;
        color: #2a92ee;
        float: left;
    }
    .dataContent .content1 .contentIcon span{
        display: inline-block;
        margin-left: 10px;
    }
</style>